<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>JavaScript语法</title>
        <style type="text/css">
      
            #did{
               width:200px;height:200px;
               overflow:hidden;
               position:absolute;
               display:none;
            }
        </style>
    </head>
    <body>
        <h3>JavaScript中的放大镜实例</h3>
        <img id="mid" src="./images/Meinv120.jpg" width="384"/>
        
        <div id="did">
            <img src="./images/Meinv120.jpg"/>
        </div>
        
        <script type="text/javascript">
           //获取图片mid节点
           var mid = document.getElementById("mid");
           //获取div放大图层节点
           var did = document.getElementById("did");
           //添加鼠标移入和移出事件
           mid.onmouseover=function(){
               //获取当前图层的位置和宽高
               var top = this.offsetTop;
               var left = this.offsetLeft+this.offsetWidth+5;
               //定位放大镜位置
               did.style.top=top+"px";
               did.style.left=left+"px";
               did.style.display="block";
           }
           //添加鼠标移出事件
           mid.onmouseout=function(){
               did.style.display="none";
           }
           //添加鼠标移动事件
           mid.onmousemove=function(ent){
               //兼容IE和火狐浏览器兼容
               var event = ent || window.event;
               //计算出鼠标在图片上的移动位置
               var x =event.clientX-this.offsetLeft;
               var y =event.clientY-this.offsetTop;
               console.log(this.offsetLeft,this.offsetTop,event.clientX,event.clientY);
               //定位放大镜的滚动图层位置
               did.scrollTop = y*5-100;
               did.scrollLeft = x*5-100;
           }
        </script>
    </body>
</html>